<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>M5俱乐部</title>
<!-- 引入 FrozenUI -->
<link rel="stylesheet" href="/js/front/jquery-weui.min.css" />
<link rel="stylesheet" href="/js/front/weui.css" />




</head>


<style type="text/css">
.weui-navbar__item.weui-bar__item--on {
	background-color: black;
}

.weui-navbar__item {
	background-color: black;
}

.weui-bar__item--on{
	font-color : white;
}

.juzhong {
	text-align: center;
	background-size: cover;
}

.man {
	width:100%;
	height:100%,
	
}

.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
</style>
<script type="text/javascript">

</script>

<body>
	<div class="weui-tab">
		<div class="weui-navbar" style="background-color:;">
			<a class="weui-navbar__item weui-bar__item--on" style="border: 0px" href="#tab1"> <span
				class="sp1">资讯</span>
			</a> <a class="weui-navbar__item" style="border: 0px" href="#tab2"> <span class="sp2">传奇</span>
			</a>
		</div>
		<div class="weui-tab__bd">
			<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active" style="margin-top:0px">
				<div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
				  <div class="swiper-wrapper">
				    <div class="swiper-slide juzhong"><div style="width:100%; height:200px; background: url('/image/201805231447547783.jpg')  no-repeat;  background-size:cover;"></div></div>
				    <div class="swiper-slide juzhong"><div style="width:100%; height:200px; background: url('/image/201806192219326488.jpg')  no-repeat;  background-size:cover;"></div></div>
				    <div class="swiper-slide juzhong"><div style="width:100%; height:200px; background: url('/image/201806192221288568.jpg')  no-repeat;  background-size:cover;"></div></div>
				  </div>
				   <div class="swiper-pagination"></div>
				</div>
			</div>
			<div id="tab2" class="weui-tab__bd-item">
			
			
			</div>
		</div>
	</div>



	<div class="weui-cells" style="width:100%; margin-top:10px">
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
		<div class="weui-cell" style="padding:0px" >
			<div class="weui-cell__bd" style="background-color:#3AB3FF; width: 60%; height: 100px"></div>
			<div class="weui-cell__ft" style="background-color:#EEB422; width: 40%; height: 100px"></div>
		</div>
	</div>
	<div class="weui-loadmore">
	  <i class="weui-loading" id="loadingicon"></i>
	  <span class="weui-loadmore__tips" id="trip">正在加载</span>
	</div>
	</div>
</body>
<script src="/js/front/jquery.min.js"></script>
<script src="/js/front/city-picker.min.js"></script>
<script src="/js/front/jquery-weui.min.js"></script>
<script src="/js/front/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
	direction: 'horizontal',
    loop: true,
    pagination: {
        el: '.swiper-pagination',
    },
})

var loading = false;  //状态标记
var count = 0;
$(document.body).infinite().on("infinite", function() {
  if(loading) return;
  loading = true;
  setTimeout(function() {
	if(count < 5){
	    $(".weui-cells").append("<div class=\"weui-cell\"><div class=\"weui-cell__bd\" style=\"border: 1px solid black; width: 60%; height: 100px\"></div><div class=\"weui-cell_ft\" style=\"border: 1px solid black; width: 40%; height: 100px\"></div></div>");
	    loading = false;
	    count ++;
	}else{
		$("#loadingicon").css("display","none");
		$("#trip").text("没有更多了");
	}
  }, 1500);   //模拟延迟
});
</script>

</html>